/**
 * 描述：职能-职位分类弹出框
 */
<style lang="scss" scoped>
  @import 'src/styles/common';
  @import 'src/components/common/jobClassify/index.less';
</style>
<template>
    <Spin size="large" class="bg" v-show="showModal">
      <transition name="fade" mode="out-in">
          <div class="kuang">
            <div class="title">
              <span>选择职位</span>
              <Icon type="close" class="close" @click="close"></Icon>
              <div class="clear"></div>
            </div>
            <div class="inner">
              <div class="left">
                <a v-for="(item, index) in first" :key="index" :class="{cur: selectFirst == index}" @click="clickFirst(index)">{{item}}</a>
                <div class="clear"></div>
              </div>
              <div class="right">
                  <div class="topTwo">
                    <a v-for="(item, index) in second" :key="index" :class="{cur: selectSecond == index}" @click="clickSecond(index)">{{item.label}}</a>
                    <div class="clear"></div>
                  </div>
                  <div class="topThree">
                    <span v-for="(item, index) in third" :key="index" @click="clickThird(item)">{{item.label}}</span>
                    <div class="clear"></div>
                  </div>
              </div>
            </div>
          </div>
      </transition>
    </Spin>
</template>
<script>
//    const prefixCls = 'job-classify';
import { dictJob } from '@/service/company/selectService/selectMService';

    export default {
        name: 'JobClassify',
        data () {
            return {
                isHover: false,
                showModal: false,
                list: [],
                first: [],
                second: [],
                third: [],
                industryId: '',
                selectFirst: 0,
                selectSecond: null,
                selectJob: 0 // 职位
            };
        },
        computed: {
        },
        props: {
          value: Boolean
        },
        created () {
          this.getList();
        },
        methods: {
            handlerClose () {
              this.$emit('input', false);
            },
            async getList () {
              let result = await dictJob();
              this.list = result.data || [];
              this.list.forEach(item => {
                this.first.push(item.label);
              });
              this.clickFirst(0);
              this.clickSecond(0);
            },
            clickFirst (index) {
                this.selectFirst = index;
                this.second = [];
                this.third = [];
                if (this.list[index].children) this.second = this.list[index].children;
                this.industryId = this.list[index].id;
            },
            clickSecond (index) {
              this.selectSecond = index;
              this.third = [];
              if (this.list[this.selectFirst].children[index].children) this.third = this.list[this.selectFirst].children[index].children;
            },
            clickThird (val) {
              val.industryId = this.industryId;
              this.$emit('jobData', val);
              this.handlerClose();
            },
            close () {
              this.handlerClose();
            }
        },
        watch: {
          value (val) {
            this.showModal = val;
          }
        }
    };
</script>
